@using Abc.Core.Entities;
@using Abc.Core;
@{
    ViewData["Title"] = "UserIndex";
}
<div class="layui-row layui-col-space10">
    <div class="layui-card" id="headsearch">
        <div class="layui-card-body" style="padding: 0px;">
            <form class="layui-form" action="javascript:;" id="queryform">
                <div class="layui-form-item">

                    @*
                        <input type="hidden" name="OrderId" value="@ViewBag.OrderId" />
                        <input type="hidden" name="UserId" value="@ViewBag.UserId" />
                        <div class="layui-inline">
                             <label class="layui-form-mid">发票状态</label>
                             <div class="layui-input-inline" style="width: 100px;">
                                 <select name="InvoiceState" id="InvoiceState">
                                     <option value="">--请选择--</option>
                                     @foreach (int val in Enum.GetValues(typeof(InvoiceState)))
                                     {
                                         <option value="@(val)">@(((InvoiceState)val).ToString())</option>
                                     }
                                 </select>
                             </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-mid">时间</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="StartDate" id="StartDate" placeholder="开始时间">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="EndDate" id="EndDate" placeholder="结束时间">
                            </div>
                        </div>

                    *@
                    <div class="layui-inline">
                        <label class="layui-form-mid">账号类型</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <select name="UserType" id="UserType">
                                <option value="">--请选择--</option>
                                <option value="99">超级管理员</option>
                                <option value="100">管理员</option>
                                <option value="0">普通用户</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-mid">关键词</label>
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="KeyWords" name="KeyWords" placeholder="输入关键词模糊查询" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div id="search" lay-submit class="layui-btn " data-type="search" lay-submit lay-filter="search"> <i class="layui-icon layui-icon-search"></i>查找</div>
                        <div id="reset" type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置</button>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 0px;">
            <table id="listData" class="layui-hide" lay-filter="listData"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="pear-btn pear-btn-primary pear-btn-md" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</div>
    <div class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</div>
</script>
@*tablebar*@
<script type="text/html" id="tablebar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></button>
    <button class="pear-btn pear-btn-sm" id="more_{{d.Id}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>
<script type="text/plain" id="moreTool">
    [
        [{txt: "导出信息", event: "progress"}]
        [{txt: "下载文件", event: "resolve"}]
        [{txt: "查看详情", event: "reopen"}]
    ]
</script>

<script type="text/html" id="tpl_IsEnable">
    <input type="checkbox" name="IsEnable" objid="{{d.Id}}" value="true" lay-skin="switch" lay-text="启用|关闭" lay-filter="IsEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>
<script type="text/html" id="tpl_IsTest">
    <input type="checkbox" name="IsTest" objid="{{d.Id}}" value="true" lay-skin="switch" lay-text="启用|关闭" lay-filter="IsTest" {{ d.IsTest ? 'checked' : '' }}>
</script>

@*<script type="text/html" id="tplable">
     小圆点：
      <span class="layui-badge-dot"></span>
      <span class="layui-badge-dot layui-bg-orange"></span>
      <span class="layui-badge-dot layui-bg-green"></span>
      <span class="layui-badge-dot layui-bg-cyan"></span>
      <span class="layui-badge-dot layui-bg-blue"></span>
      <span class="layui-badge-dot layui-bg-black"></span>
      <span class="layui-badge-dot layui-bg-gray"></span>
      常规弧形徽章：
      <span class="layui-badge">6</span>
      <span class="layui-badge">99</span>
      <span class="layui-badge">61728</span>
      <span class="layui-badge">赤</span>
      <span class="layui-badge layui-bg-orange">橙</span>
      <span class="layui-badge layui-bg-green">绿</span>
      <span class="layui-badge layui-bg-cyan">青</span>
      <span class="layui-badge layui-bg-blue">蓝</span>
      <span class="layui-badge layui-bg-black">黑</span>
      <span class="layui-badge layui-bg-gray">灰</span>
    </script>*@
@section Scripts{
    <script>
     layui.use(['table', 'form', 'jquery','laydate', 'drawer', 'dropdown',  'upload','layer'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        let upload = layui.upload;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        //事件集合
        var active = {
                example: function () {
                },
                example1: function () {
                    }
                };
        //注册layui-btn 事件
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        app.indexInit();
        //监听头工具栏事件
        table.on('toolbar(listData)',function(obj) {
            if (obj.event === 'add') {
                app.open({ title: '新增', url: '@(Url.Action("Info"))', area: ['600px', '700px'], end:window.refresh });
           } else if (obj.event === 'refresh') {
               window.refresh();
            } else if (obj.event === 'batchRemove') {
                var ids = app.getSelectDataIds(table,"listData");
                //let data = table.checkStatus(obj.config.id).data;
                if (ids.length === 0) {
                    layer.msg("未选中数据", { icon: 3,time: 1000});
                    return false;
                }
                //let ids = "";
                //for (let i = 0; i < data.length; i++) {
                //    ids += data[i].userId + ",";
                //}
                //ids = ids.substr(0, ids.length - 1);
               app.delete({url: "@(Url.Action("BatchDelete"))", data: { ids: ids }, success: function () {window.refresh()}});
           }
        });
        //监听table行事件
        table.on('tool(listData)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'delete') { //删除
                app.delete({ url: "@(Url.Action("BatchDelete"))", data: { ids: obj.data.Id }, success: function () {obj.del();window.refresh()}});
            } else if (layEvent === 'edit') { //编辑
                window.edit(obj);
            }

        });

        //table 行双击事件
        table.on('rowDouble(listData)', function (obj) { window.edit(obj); });
        //table 行中的事件监听
        //编辑
        window.edit=  function(obj) {
            app.open({ title: '编辑', url: '@(Url.Action("Info"))/' + obj.data.Id, area: ['600px', '700px'], end: window.refresh });
        }

        //Table 初始化
        //, templet: '#tpl_user'
        var cols= [
                [
                    //, templet: '#tplRechargeState'
                    {checkbox:true},
                    //{ type: 'numbers', fixed: 'left', rowspan: 1 },
                    //{ title: '标签', 'toolbar': '#tplable', fixed: 'left', width: 100 },
                    //{ title: 'ID', field: 'Id', width: 60 },

                    { title: 'ID', field: 'Id', minWidth: 60, align:'center' },
                    { title: '用户名', field: 'Account', minWidth: 100, align:'center' },
                    //{ title: '密码', field: 'Pwd', minWidth: 80, align:'center' },
                    { title: '账户类型', field: 'UserType', minWidth: 90, align: 'center' },
                    { title: '角色', field: 'RoleName', minWidth: 90, align: 'center' },
                    { title: '是否启用', field: 'IsEnable', minWidth: 90, align: 'center', templet:'#tpl_IsEnable' },
                    //{ title: '是否测试', field: 'IsTest', minWidth: 90, align: 'center', templet: '#tpl_IsTest' },
                    { title: '昵称', field: 'Nick', minWidth: 60, align:'center' },
                    { title: '邮箱', field: 'Email', minWidth: 80, align:'center' },
                    { title: '省份', field: 'Province', minWidth: 60, align:'center' },
                    { title: '城市', field: 'City', minWidth: 60, align:'center' },
                    //{ title: '镇', field: 'Town', minWidth: 60, align:'center' },
                    //{ title: '详细地址', field: 'Address', minWidth: 60, align:'center' },
                    { title: '联系电话', field: 'Phone', minWidth: 60, align:'center' },
                    //{ title: '办公电话', field: 'Tel', minWidth: 60, align:'center' },
                    { title: '备注', field: 'Remark', minWidth: 60, align:'center' },
                    { title: '最后登录时间', field: 'LastLoginTime', minWidth: 60, align:'center' },
                    { title: '最后登录IP', field: 'LastLoginIp', minWidth: 60, align:'center' },
                    //{ title: '最后登录用户浏览器信息', field: 'LastLoginUserAgent', minWidth: 60, align:'center' },
                    //{ title: '创建用户ID', field: 'CreatorUserId', minWidth: 60, align:'center' },
                    //{ title: '创建用户', field: 'CreatorUserName', minWidth: 60, align:'center' },
                    //{ title: '创建时间', field: 'CreationTime', minWidth: 60, align:'center' },
                    //{ title: '更新用户ID', field: 'UpdateUserId', minWidth: 60, align:'center' },
                    //{ title: '更新用户', field: 'UpdateUserName', minWidth: 60, align:'center' },
                    //{ title: '更新时间', field: 'UpdateTime', minWidth: 60, align:'center' },
                    //{ title: '默认假删除', field: 'IsDeleted', minWidth: 60, align:'center' },
                    //{ title: '删除用户ID', field: 'DeletedUserId', minWidth: 60, align:'center' },
                    //{ title: '删除用户', field: 'DeletedUserName', minWidth: 60, align:'center' },
                    //{ title: '删除时间', field: 'DeletedTime', minWidth: 60, align:'center' },

                    { title: '操作', fixed: 'right', width: 140, align: 'left', toolbar: '#tablebar' }
                ]
            ];

         app.initTable( "listData", cols, { title: '123465' });

         //表格下拉菜单
         window.tableDone = function (res, curr, count) {
             //for (var i = 0; i < res.data.length; i++) {
             //    if (res.data[i].Id == "1" || res.data[i].Id == "8") {
             //        $("#more" + res.data[i].Id).hide();
             //        continue;
             //    }

             //    dropdown.suite("#more" + res.data[i].Id, {
             //        align: 'left',
             //        data: res.data[i],
             //        templateMenu: "moreTool",
             //    });
             //}
             setTimeout(function () {
                 for (var i = 0; i < res.data.length; i++) {
                     //初演示
                     dropdown.render({
                         elem: '#more_' + res.data[i].Id
                         , data: [{
                             title: '导出信息'
                             , id: 100
                         }, {
                             title: '下载文件'
                             , id: 101
                         }, {
                             title: '查看详情'
                             , id: 102
                         }]
                         , id: '#more_' + res.data[i].Id
                         , click: function (obj) {
                             layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                         }
                     });
                 }

             }, 2000);

         }
         //IsEanble 开关事件
         form.on('switch(IsEnable)', function (obj) {
             app.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state:obj.elem.checked,type:'isenable' } });
         });
         //IsEanble 开关事件
         form.on('switch(IsTest)', function (obj) {
             app.post({ url: '@(Url.Action("SetState"))', data: { Id: $(this).attr('objid'), state:obj.elem.checked,type:'istest' } });
         });
        //提交搜索
        form.on('submit(search)', function (obj) {
            app.search( 'listData', '@(Url.Action("GetList"))', obj.field, { method: "post", done: window.tableDone });
            return false;
        });
        $("#search").click();//初始化完成后 搜索一次
        window.refresh = function () {
            $("#search").click();
        };

        // 初始化日期选择
        //app.initDate('StartDate,EndDate');
    });
    </script>

}